<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>调度计划</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="/style/public/publicStyle.js"></script>
    <style type="text/css">
        .cardHeader {
            font-weight:bold;
            background-color: #B5FFF8;
            width: 90%;
        }
    </style>

</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb" style="visibility: visible;">
			<a href="">任务管理</a><span lay-separator="">/</span>
			<a>
				<cite>调度计划</cite></a>
			</span>

</div>
<div class="weadmin-body">
    <div class="layui-col-md6">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>任务列表</legend>
        </fieldset>
        <div id="jobList"></div>
       <!-- <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header cardHeader">按天抽取病案数据<span style="color: #ff0907;font-weight:bold;float: right">Stop</span></div>
                    <div class="layui-card-body">
                        异常次数：<span style="color: red">14次</span><br/><br/>
                        <a href="***">查看抽取历史</a><br/><br/>
                        执行频次(0 0 20 1/1 * ?)<br/><br/>
                        下次执行时间：2020-03-04<br/><br/>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header cardHeader">按天抽取病案数据<span style="color: #ff0907;font-weight:bold;float: right">Stop</span></div>
                    <div class="layui-card-body">
                        <div>异常次数：<span style="color: red">14次</span></div><br/>
                        <div><a>查看抽取历史</a></div><br/>
                        <div>执行频次(0 0 20 1/1 * ?)</div><br/>
                        <div>下次执行时间：2020-03-04</div><br/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header cardHeader">按天抽取病案数据<span style="color: #ff0907;font-weight:bold;float: right">Stop</span></div>
                    <div class="layui-card-body">
                        <div>异常次数：<span style="color: red">14次</span></div><br/>
                        <div><a>查看抽取历史</a></div><br/>
                        <div>执行频次(0 0 20 1/1 * ?)</div><br/>
                        <div>下次执行时间：2020-03-04</div><br/>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header cardHeader">按天抽取病案数据<span style="color:#00FF00;font-weight:bold;float: right">Running</span></div>
                    <div class="layui-card-body">
                        <div>异常次数：<span style="color: red">14次</span></div><br/>
                        <div><a>查看抽取历史</a></div><br/>
                        <div>执行频次(0 0 20 1/1 * ?)</div><br/>
                        <div>下次执行时间：2020-03-04</div><br/>
                    </div>
                </div>
            </div>
        </div>-->
        <!--<div class="layui-bg-gray" style="padding: 30px;">
            <div class="layui-row layui-col-space15" id="cards">
            </div>
        </div>-->
    </div>
    <div class="layui-col-md3">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>今日待执行任务队列</legend>
        </fieldset>
        <div style="width: 90%" id="jobList24h">
        </div>
    </div>
    <div class="layui-col-md3">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>执行中</legend>
        </fieldset>

        按分钟抽取实时数据
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div><br/>
        </div>
        <br/>
        按分钟抽取实时数据
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
            <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div><br/>
        </div>
        <br/>
        按分钟抽取实时数据
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div><br/>
        </div>
        <br/>
        按分钟抽取实时数据
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
            <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div><br/>
        </div>

        <!--<div class="layui-bg-gray" style="padding: 30px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-card" style="width: 100%;">
                    <div class="layui-card-header" style="background-color: #476c88;color: #ffffff;">执行任务</div>
                    <div class="layui-panel" style="background-color: #fbfbfb;height: 260px;">
                        <div style="margin-left: 5px;" id="card"></div>
                    </div>
                </div>

            </div>
        </div>-->
    </div>
</div>

</body>
<script>
    layui.use(['dropdown', 'util', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var $ = layui.jquery
            ,element = layui.element;
        function load(othis) {
            var DISABLED = 'layui-btn-disabled';
            //模拟loading
            var n = 0, timer = setInterval(function(){
                n = n + Math.random()*10|0;
                if(n>100){
                    n = 100;
                    clearInterval(timer);
                }
                element.progress('demo', n+'%');
            }, 300+Math.random()*1000);
        }
        var color = ["red","green","black"];
        var job24hTrigger = function (data) {
            debugger;
            $.ajax({
                url:'/jobinfo/triggerTime24h',
                type:'post',
                dataType:'json',
                contentType:'application/json;charset=UTF-8',
                data:JSON.stringify(data),
                success:function (msg) {
                    $("#jobList24h").empty();
                    var data = msg.data;
                    var html = "";
                    var job;
                    var i=0;
                    for (var key in data) {
                        i++;
                        job = data[key];
                        html += job.jobname+'('+job.nextTimeDesc+'后 剩余'+job.times+'次)<hr class="layui-border-'+color[i%3]+'"><br>';
                    }
                    $("#jobList24h").append(html);
                }
            })
        }
        function refash() {
            $.ajax({
                type: "get",
                url: " /jobplan/getPlanData",
                async: true,
                success: function (msg) {
                    $("#jobList").empty();
                    layui.layer.closeAll()
                    var data = msg.data;
                    var xxlJobHtml = "";
                    var job,status ;
                    var jobDataArr = [],jobData;
                    var i=0;
                    for (var key in data) {
                        if(i<data.length) {
                            job = data[key];
                            if (i % 2 == 0) {
                                xxlJobHtml += '<div class="layui-row">';
                            }//triggerStatus
                            status = job.triggerStatus == 1 ? '<span style="color:#00FF00;float: right; ">Runing</span>':'<span style="color: #ff0907;float: right;">Stop</span>';
                            xxlJobHtml += '<div class="layui-col-md6">' +
                                '<div class="layui-card">' +
                                '<div class="layui-card-header cardHeader">'+job.jobDesc+status+'</div>' +
                                '<div class="layui-card-body">' +
                                '待处理异常数：<span style="color: red">'+job.id+'个</span><br/><br/>' +
                                '<a href="***">查看抽取历史</a><br/><br/>' +
                                '执行频次('+job.scheduleConf+')<br/><br/>' +
                                '下次执行时间：'+job.triggerNextTime+'<br/><br/>' +
                                '</div>' +
                                '</div>' +
                                '</div>';
                            if (i % 2 == 1) {
                                xxlJobHtml += '</div>';
                            }
                            if(job.triggerStatus == 1) {
                                jobData = new Object();
                                jobData.cron = job.scheduleConf;
                                jobData.jobDesc = job.jobDesc;
                                jobDataArr.push(jobData);
                            }
                        }
                        i++;
                    }
                    $("#jobList").append(xxlJobHtml);
                    job24hTrigger(jobDataArr);
                }
            });
        }
        load();
        refash();
    });
        /*$("#seach").click(function () {
            getData();
        });*/
 


        /*function getData() {
            layui.layer.load();
            var html = "";
            var htmls = "";
            var plan = "";
            $.ajax({
                type: "get",
                url: " /jobplan/getPlanData",
                async: true,
                data: {
                    'startDate': document.getElementById("startDate").value,
                    'endDate': document.getElementById("endDate").value
                },
                success: function (json) {
                    layui.layer.closeAll()

                    var date;

                    for (var i = 0; i < json.data.length; i++) {
                        var status = json.data[i].triggerStatus == 1 ? '<span style="color:#00FF00; ">Runing</span> ' : ' <span style="color: #ff0907">Stop</span>';
                        var triggerLastTime = 0;
                        var triggerNextTime = 0;
                        if (json.data[i].triggerLastTime != 0) {
                            date = new Date(json.data[i].triggerLastTime);
                            triggerLastTime = date.format("yyyy-MM-dd hh:mm:ss");
                        }
                        if (json.data[i].triggerLastTime != 0) {
                            date = new Date(json.data[i].triggerNextTime);
                            triggerNextTime = date.format("yyyy-MM-dd hh:mm:ss");
                        }
                        if (json.data[i].triggerStatus == 1) {
                            // html = html + '<div class="layui-col-md3" id="' + i + '"><div class="layui-card"><div class="layui-card-header" style="background-color: #476c88;color: #ffffff;">' + json.data[i].executorHandler + '<span style="float: right;">状态：'+status+'</span></div><div class="layui-panel" style="height: 100px;background-color: #fbfbfb">上次执行时间：' + triggerLastTime + '<br>下次执行时间：' + triggerNextTime + '<br>JobHandler:' + json.data[i].jobDesc + '</div></div></div>';
                            html = html + '<button type="button" class="layui-btn layui-btn-xs" style="margin-bottom: 5px;width: 150px;">' + json.data[i].executorHandler + '</button><br/>';
                            plan = plan + '<hr/><span style="color: #0a3aff;">' + json.data[i].executorHandler + '</span>&nbsp;&nbsp;&nbsp;&nbsp;' + triggerNextTime + '&nbsp;&nbsp;&nbsp;&nbsp;' + json.data[i].planCount
                        }
                        htmls = htmls + '<div class="layui-col-md6" id="' + i + '"><div class="layui-card"><div class="layui-card-header" style="background-color: #476c88;color: #ffffff;">' + json.data[i].executorHandler + '<div style="float: right;">' + status + '</div></div><div class="layui-panel" style="height: 100px;background-color: #fbfbfb;"><div style="margin-left: 5px;">执行计划：<br/>' + json.data[i].runPlan + '</div></div></div></div>';
                    }
                    //document.getElementById("card").innerHTML = html;
                    document.getElementById("cards").innerHTML = htmls;
                    document.getElementById("planData").innerHTML = plan;
                }
            });
        }


    })

    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份   
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时   
            "m+": this.getMinutes(),                 //分   
            "s+": this.getSeconds(),                 //秒   
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
            "S": this.getMilliseconds()             //毫秒   
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    function getDayTime(type, ymd, num) {
        var str;
        var year;
        var month;
        var day;
        var date = new Date();
        if (ymd == 'year') {
            year = date.getFullYear() - num;
        } else {
            year = date.getFullYear();
        }

        if (ymd == 'month') {
            month = date.getMonth() + 1 - num;
        } else {
            month = date.getMonth() + 1
        }
        if (ymd == 'day') {
            day = date.getDate() - num;
        } else {
            day = date.getDate()
        }


        if (month < 10) {
            month = '0' + month;
        }
        if (day < 10) {
            day = '0' + day;
        }
        if (type == 'end') {
            str = year + '-' + month + '-' + day + ' 23:59:59'
        } else {
            str = year + '-' + month + '-' + day + ' 00:00:00'
        }
        return str
    }


    document.getElementById("startDate").value = getDayTime('start', 'day', 0);
    document.getElementById("endDate").value = getDayTime('end', 'day', 0);
    layui.use(['laydate'], function () {
        var laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#laydate'
            , type: 'datetime'
            , range: ['#startDate', '#endDate']
        });
    })*/

</script>

</html>